<template>
  <div class="box">
    <div class="spec-box">
      <img :src="$pre + list.img" alt="" class="spec-1" />
    </div>
    <div class="spec-price clearfix">
      <div class="price-right">
        <i><van-icon name="star-o" /></i>
        <p>收藏</p>
      </div>
      <p class="price-left">
        &yen;<span>{{ list.price }}</span>
      </p>
      <del>&yen;{{ list.market_price }}</del>

      <h4>溪牧原山茶花洁面泡沫 氨基酸洗面奶 150ML</h4>
      <p class="price-use">
        敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔
      </p>
      <span class="limit">11.11限时299元起</span>
      <div class="price-explain">
        <p>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场 </p>
        <span>查看&gt;</span>
      </div>
    </div>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="$router.push('/index/shopping')"
        />
        <van-goods-action-icon
          icon="star"
          :text="isture ? '已收藏' : '收藏'"
          @click="isture = !isture"
          :color="isture ? '#ff4400' : ''"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="add"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqsinfo, reqcart } from "../../http/http";
export default {
  data() {
    return {
      list: {},
      //添加
      isture: true,
    };
  },
  mounted() {
    //获去商品信息
    reqsinfo({
      id: this.$route.query.id,
    }).then((res) => {
      this.list = res.data.list[0];
    });
  },
  methods: {
    add() {
      reqcart({
        uid: JSON.parse(localStorage.getItem("user")).uid,
        goodsid: this.$route.query.id,
        num: 1,
      }).then((res) => {
        if (res.data.code == 200) {
          Toast(res.data.msg);
          this.$router.push("/index/shopping");
        }
      });
    },
  },
};
</script>

<style scoped>
img {
  width: 100%;
}
.name {
  font-size: 0.3rem;
}
.name h3 {
  font-size: 0.4rem;
  padding: 0.2rem;
}
/* 主体 */

.spec-box {
  position: relative;
}

.spec-box i {
  position: absolute;
  font-size: 0.48rem;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  right: 0.3rem;
  top: 0.3rem;
  cursor: pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.spec-price {
  position: relative;
  box-sizing: border-box;
  font-size: 0.28rem;
  padding: 0 0.2rem;
  height: 3rem;
}

.spec-price p {
  color: #999999;
}

.spec-price .price-left {
  /* float: left; */
  line-height: 0.9rem;
  color: #ff6040;
  margin-right: 0.22rem;
}

.spec-price del {
  position: absolute;
  left: 1.68rem;
  top: 0.4rem;
  color: #999;
}

.spec-price p span {
  font-size: 0.6rem;
}

.price-right {
  margin-top: 0.25rem;
  float: right;
  font-size: 0.18rem;
  cursor: pointer;
  text-align: center;
  color: #fe6141;
}

.price-right p {
  color: #fe6141;
  line-height: 0.3rem;
}

.price-right h4 {
  font: 0.3rem;
  line-height: 40rem;
  color: #333;
}

.spec-price .price-use {
  font-size: 0.26rem;
  line-height: 0.45rem;
}

.spec-price .limit {
  position: absolute;
  top: 1.88rem;
  left: 0.2rem;
  width: 1.66rem;
  height: 0.32rem;
  font-size: 0.16rem;
  line-height: 0.32rem;
  text-align: center;
  color: #fff;
  background-color: #ff8066;
}

.price-explain {
  position: absolute;
  top: 2.4rem;
  left: 0.2rem;
  box-sizing: border-box;
  padding: 0 0.1rem;
  width: 7.1rem;
  height: 0.4rem;
  font-size: 0.18rem;
  background-color: #f2f2f2;
}

.price-explain p {
  float: left;
  line-height: 0.4rem;
  color: #a9a9a9;
}

.price-explain span {
  line-height: 0.4rem;
  float: right;
  font-size: 0.18rem;
  color: #fe6141;
}
</style>
